<template>
  <div></div>
</template>

<script>
import * as echarts from "echarts/core";
import { GaugeChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
export default {
  //import引入组件才能使用
  components: {},
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      color: "#67C23A",
    };
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleColor(val) {
      if (val <= 30) {
        this.color = "#67C23A";
      } else if (val <= 65) {
        this.color = "#409EFF";
      } else if (val <= 85) {
        this.color = "#E6A23C";
      } else if (val <= 100) {
        this.color = "#F56C6C";
      }
    },
    init() {
      echarts.use([GaugeChart, CanvasRenderer]);
      const chartDom = document.getElementById(this.$attrs.id);
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 14,
              itemStyle: {
                color: this.color,
              },
            },
            axisLine: {
              lineStyle: {
                width: 14,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 20,
              color: "#999",
              fontSize: 16,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                // borderWidth: 5,
                // borderColor: "#999", // 边框颜色
                color: this.color,
              },
            },
            // 指针
            pointer: {
              itemStyle: {
                color: this.color,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              formatter: "{value} %",
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: this.value,
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {
    this.handleColor(this.value);
  },
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
};
</script>
<style scoped>
body {
  color: #999;
}
</style>
